<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>会员任务中心 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #5B7BDF;
            --primary-light: #E8EBFA;
            --secondary: #FF7D54;
            --success: #28C76F;
            --warning: #FFC107;
            --dark: #2D3436;
            --gray: #6C757D;
            --light-gray: #F8F9FA;
            --border: #E1E4E8;
            --vip: #FFD700;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-gray);
            color: var(--dark);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--dark);
            font-size: 20px;
        }
        
        /* 会员任务头部 */
        .task-header {
            background: linear-gradient(135deg, var(--primary), #4A69D9);
            color: white;
            padding: 20px 16px;
            border-radius: 0 0 16px 16px;
            margin-bottom: 16px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid white;
            margin-right: 12px;
        }
        
        .user-details {
            flex: 1;
        }
        
        .user-name {
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .vip-tag {
            background-color: var(--vip);
            color: #8B6914;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 4px;
            font-weight: 600;
        }
        
        .user-level {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .reward-summary {
            display: flex;
            justify-content: space-around;
            text-align: center;
        }
        
        .reward-item {
            flex: 1;
        }
        
        .reward-value {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .reward-label {
            font-size: 12px;
            opacity: 0.9;
        }
        
        /* 任务进度 */
        .progress-section {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            margin: 0 16px 16px;
        }
        
        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .progress-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .progress-stats {
            font-size: 13px;
            color: var(--primary);
        }
        
        .progress-bar-container {
            height: 8px;
            background-color: var(--light-gray);
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        
        .progress-bar {
            height: 100%;
            background-color: var(--primary);
            border-radius: 4px;
            width: 65%;
        }
        
        .level-rewards {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: var(--gray);
        }
        
        /* 任务标签页 */
        .task-tabs {
            display: flex;
            background-color: white;
            border-bottom: 1px solid var(--border);
            margin: 0 16px;
            border-radius: 12px 12px 0 0;
            overflow: hidden;
        }
        
        .task-tab {
            flex: 1;
            padding: 14px 0;
            text-align: center;
            font-size: 15px;
            font-weight: 500;
            color: var(--gray);
            text-decoration: none;
            border-bottom: 2px solid transparent;
        }
        
        .task-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        /* 任务列表容器 */
        .task-container {
            background-color: white;
            margin: 0 16px 16px;
            border-radius: 0 0 12px 12px;
            overflow: hidden;
        }
        
        /* 任务项样式 */
        .task-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .task-item {
            padding: 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .task-item:last-child {
            border-bottom: none;
        }
        
        .task-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .task-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        .task-details {
            flex: 1;
        }
        
        .task-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .task-desc {
            font-size: 12px;
            color: var(--gray);
        }
        
        .task-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .task-reward {
            font-size: 13px;
            color: var(--secondary);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .task-btn {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            border: none;
            cursor: pointer;
        }
        
        .btn-do {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .btn-claim {
            background-color: var(--success);
            color: white;
        }
        
        .btn-completed {
            background-color: var(--light-gray);
            color: var(--gray);
        }
        
        /* 特殊任务标记 */
        .task-tag {
            display: inline-block;
            padding: 1px 6px;
            font-size: 10px;
            border-radius: 4px;
            margin-left: 6px;
        }
        
        .tag-daily {
            background-color: #E3F2FD;
            color: #1976D2;
        }
        
        .tag-weekly {
            background-color: #E8F5E9;
            color: #388E3C;
        }
        
        .tag-vip {
            background-color: #FFF8E1;
            color: #FF8F00;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border);
            z-index: 1000;
        }
        
        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: var(--gray);
            text-decoration: none;
            font-size: 10px;
            flex: 1;
        }
        
        .bottom-nav-item.active {
            color: var(--primary);
        }
        
        .bottom-nav-icon {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">会员任务中心</div>
        <button class="nav-btn" id="helpBtn">
            <i class="fas fa-question-circle"></i>
        </button>
    </div>
    
    <!-- 会员任务头部 -->
    <div class="task-header">
        <div class="user-info">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="user-avatar">
            <div class="user-details">
                <div class="user-name">
                    张小明
                    <span class="vip-tag">VIP会员</span>
                </div>
                <div class="user-level">会员等级 Lv.5 <i class="fas fa-arrow-right" style="font-size: 12px;"></i> Lv.6</div>
            </div>
        </div>
        
        <div class="reward-summary">
            <div class="reward-item">
                <div class="reward-value">2,580</div>
                <div class="reward-label">我的积分</div>
            </div>
            <div class="reward-item">
                <div class="reward-value">12</div>
                <div class="reward-label">本月任务完成</div>
            </div>
            <div class="reward-item">
                <div class="reward-value">8</div>
                <div class="reward-label">待领取奖励</div>
            </div>
        </div>
    </div>
    
    <!-- 任务进度 -->
    <div class="progress-section">
        <div class="progress-header">
            <div class="progress-title">等级进度</div>
            <div class="progress-stats">650/1000 积分</div>
        </div>
        <div class="progress-bar-container">
            <div class="progress-bar"></div>
        </div>
        <div class="level-rewards">
            <div>当前奖励: 100积分</div>
            <div>下一等级: 专属勋章</div>
        </div>
    </div>
    
    <!-- 任务标签页 -->
    <div class="task-tabs">
        <a href="#" class="task-tab active">日常任务</a>
        <a href="#" class="task-tab">成长任务</a>
        <a href="#" class="task-tab">会员专属</a>
    </div>
    
    <!-- 任务列表容器 -->
    <div class="task-container">
        <ul class="task-list">
            <!-- 日常任务 -->
            <li class="task-item">
                <div class="task-info">
                    <div class="task-icon" style="background-color: #E3F2FD; color: #1976D2;">
                        <i class="fas fa-sign-in-alt"></i>
                    </div>
                    <div class="task-details">
                        <div class="task-title">
                            每日签到
                            <span class="task-tag tag-daily">每日</span>
                        </div>
                        <div class="task-desc">连续签到可获得额外积分奖励</div>
                    </div>
                </div>
                <div class="task-actions">
                    <div class="task-reward">
                        <i class="fas fa-coins"></i> 20
                    </div>
                    <button class="task-btn btn-claim">领取</button>
                </div>
            </li>
            
            <li class="task-item">
                <div class="task-info">
                    <div class="task-icon" style="background-color: #E8F5E9; color: #388E3C;">
                        <i class="fas fa-comment"></i>
                    </div>
                    <div class="task-details">
                        <div class="task-title">
                            发布动态
                            <span class="task-tag tag-daily">每日</span>
                        </div>
                        <div class="task-desc">发布1条符合规范的动态内容</div>
                    </div>
                </div>
                <div class="task-actions">
                    <div class="task-reward">
                        <i class="fas fa-coins"></i> 50
                    </div>
                    <button class="task-btn btn-do">去完成</button>
                </div>
            </li>
            
            <li class="task-item">
                <div class="task-info">
                    <div class="task-icon" style="background-color: #FCE4EC; color: #C2185B;">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="task-details">
                        <div class="task-title">
                            互动点赞
                            <span class="task-tag tag-daily">每日</span>
                        </div>
                        <div class="task-desc">点赞或评论5位好友的动态</div>
                    </div>
                </div>
                <div class="task-actions">
                    <div class="task-reward">
                        <i class="fas fa-coins"></i> 30
                    </div>
                    <button class="task-btn btn-do">去完成</button>
                </div>
            </li>
            
            <!-- 成长任务 -->
            <li class="task-item">
                <div class="task-info">
                    <div class="task-icon" style="background-color: #FFF3E0; color: #E65100;">
                        <i class="fas fa-user-plus"></i>
                    </div>
                    <div class="task-details">
                        <div class="task-title">关注新朋友</div>
                        <div class="task-desc">关注10位推荐的新用户</div>
                    </div>
                </div>
                <div class="task-actions">
                    <div class="task-reward">
                        <i class="fas fa-coins"></i> 200
                    </div>
                    <button class="task-btn btn-do">3/10</button>
                </div>
            </li>
            
            <li class="task-item">
                <div class="task-info">
                    <div class="task-icon" style="background-color: #EDE7F6; color: #6A1B9A;">
                        <i class="fas fa-image"></i>
                    </div>
                    <div class="task-details">
                        <div class="task-title">完善个人资料</div>
                        <div class="task-desc">上传头像并填写个人简介</div>
                    </div>
                </div>
                <div class="task-actions">
                    <div class="task-reward">
                        <i class="fas fa-coins"></i> 150
                    </div>
                    <button class="task-btn btn-completed">已完成</button>
                </div>
            </li>
            
            <!-- 会员专属任务 -->
            <li class="task-item">
                <div class="task-info">
                    <div class="task-icon" style="background-color: #FFF8E1; color: #FF8F00;">
                        <i class="fas fa-gift"></i>
                    </div>
                    <div class="task-details">
                        <div class="task-title">
                            会员周任务
                            <span class="task-tag tag-weekly">每周</span>
                            <span class="task-tag tag-vip">VIP</span>
                        </div>
                        <div class="task-desc">完成5个日常任务即可领取周奖励</div>
                    </div>
                </div>
                <div class="task-actions">
                    <div class="task-reward">
                        <i class="fas fa-coins"></i> 300
                    </div>
                    <button class="task-btn btn-do">2/5</button>
                </div>
            </li>
            
            <li class="task-item">
                <div class="task-info">
                    <div class="task-icon" style="background-color: #E0F7FA; color: #00695C;">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <div class="task-details">
                        <div class="task-title">
                            会员专属活动
                            <span class="task-tag tag-vip">VIP</span>
                        </div>
                        <div class="task-desc">参与1次会员专属线上活动</div>
                    </div>
                </div>
                <div class="task-actions">
                    <div class="task-reward">
                        <i class="fas fa-coins"></i> 500
                    </div>
                    <button class="task-btn btn-do">去完成</button>
                </div>
            </li>
        </ul>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="bottom-nav-item">
            <div class="bottom-nav-icon">
                <i class="fas fa-home"></i>
            </div>
            <div class="bottom-nav-label">首页</div>
        </a>
        <a href="#" class="bottom-nav-item">
            <div class="bottom-nav-icon">
                <i class="fas fa-compass"></i>
            </div>
            <div class="bottom-nav-label">发现</div>
        </a>
        <a href="#" class="bottom-nav-item active">
            <div class="bottom-nav-icon">
                <i class="fas fa-tasks"></i>
            </div>
            <div class="bottom-nav-label">任务</div>
        </a>
        <a href="#" class="bottom-nav-item">
            <div class="bottom-nav-icon">
                <i class="far fa-user"></i>
            </div>
            <div class="bottom-nav-label">我的</div>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 标签页切换
        const taskTabs = document.querySelectorAll('.task-tab');
        taskTabs.forEach(tab => {
            tab.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有激活状态
                taskTabs.forEach(t => t.classList.remove('active'));
                
                // 添加当前激活状态
                this.classList.add('active');
                
                // 实际应用中这里可以切换不同任务列表的显示
            });
        });
        
        // 任务按钮交互
        const taskBtns = document.querySelectorAll('.task-btn');
        taskBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                if (this.classList.contains('btn-claim')) {
                    // 领取奖励
                    this.textContent = '已领取';
                    this.classList.remove('btn-claim');
                    this.classList.add('btn-completed');
                    showToast('奖励领取成功！');
                } else if (this.classList.contains('btn-do')) {
                    // 去完成任务
                    const taskTitle = this.closest('.task-item').querySelector('.task-title').textContent.trim();
                    if (taskTitle.includes('发布动态')) {
                        showToast('跳转到发布动态页面');
                        // 实际应用中可以跳转到对应页面
                    } else if (taskTitle.includes('关注新朋友')) {
                        showToast('跳转到推荐关注页面');
                    } else if (taskTitle.includes('互动点赞')) {
                        showToast('跳转到好友动态页面');
                    } else if (taskTitle.includes('会员专属活动')) {
                        showToast('跳转到会员活动页面');
                    }
                }
            });
        });
        
        // 返回按钮
        document.getElementById('backBtn').addEventListener('click', function() {
            window.history.back();
        });
        
        // 帮助按钮
        document.getElementById('helpBtn').addEventListener('click', function() {
            alert('任务中心帮助：\n1. 完成任务可获得积分奖励\n2. 积分可用于兑换会员权益\n3. 会员专享任务可获得更多奖励');
        });
        
        // 底部导航切换
        const bottomNavItems = document.querySelectorAll('.bottom-nav-item');
        bottomNavItems.forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有激活状态
                bottomNavItems.forEach(i => i.classList.remove('active'));
                
                // 添加当前激活状态
                this.classList.add('active');
            });
        });
        
        // 显示提示消息
        function showToast(message) {
            // 创建toast元素
            const toast = document.createElement('div');
            toast.className = 'fixed bottom-20 left-50 transform -translate-x-50 bg-dark text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            // 3秒后移除
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transition = 'opacity 0.3s';
                setTimeout(() => toast.remove(), 300);
            }, 2000);
        }
    </script>
</body>
</html>
